<template>
  <view class="padding-bottom-button tui-skeleton">
    <l-background />
    <view class="margin-top-16">
      <template v-if="list.length">
        <tui-list-cell v-for="(item,index) in list" :key="index" :unlined="unlined(index)" @click="chooseItem(item,index)">
          <view>
            <view class="flex-row align-center margin-bottom-16">
              <text class="text-32 color-t1 text-bold">{{ item.nickname }}</text>
              <view class="flex-row align-center">
                <view v-for="(val,key) in item.roleList" :key="key" class="margin-left-16">
                  <l-tag :text="val" height="44rpx" padding="0 12rpx" border-width="0" plain />
                </view>
              </view>
            </view>
            <text class="text-24 color-t1">{{ item.phone }}</text>
          </view>
        </tui-list-cell>
        <l-footer :has-more="hasMore" />
      </template>
      <template v-else>
        <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />
        <l-no-data v-else text="暂无数据" type="data" />
      </template>
    </view>

    <tui-actionsheet :show.sync="showActionSheet" :item-list="itemList" @click="actionClick" />
    <tui-modal :show.sync="showModal" title="提示" content="是否确认删除该成员？" @click="modalClick" />

    <safe-area-bottom v-if="auth.includes('sub_account_add')" />
    <l-bottom-button v-if="auth.includes('sub_account_add')" text="添加成员" @click="jumpSave" />
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { getSubAccount, deleteSubAccount } from '../api'
import { preloadData } from './index'
export default {
  name: 'MemberManagement',
  data() {
    return {
      list: [],
      page: 1,
      pagerSize: 20,
      hasMore: true,
      showSkeleton: true,
      preloadData,
      showModal: false,
      showActionSheet: false,
      item: {},
      inx: ''
    }
  },
  computed: {
    unlined() {
      return (inx) => {
        return inx === this.list.length - 1
      }
    },
    itemList() {
      const list = []
      if (this.auth.includes('sub_account_update')) list.push({ text: '修改信息' })
      if (this.auth.includes('sub_account_delete')) list.push({ text: '删除' })
      return list
    },
    ...mapGetters({
      userInfo: 'userInfo',
      auth: 'auth'
    })
  },
  onShow() {
    this.reload()
    this.setMemberInfo(null)
  },
  onPullDownRefresh() {
    this.reload()
  },
  onReachBottom() {
    this.nextPage()
  },
  methods: {
    // 查询企业子账号
    async getList() {
      const [err, res] = await getSubAccount(this.userInfo.companyId, {
        page: this.page,
        size: this.pagerSize
      })
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!list) list = []
      if (list.length < this.pagerSize) this.hasMore = false
      list.forEach(item => {
        if (item.roleName) item.roleList = item.roleName.split(',')
        else item.roleList = ['创建人']
      })
      if (this.page === 1) this.list = list
      else this.list.push(...list)
    },
    reload() {
      this.page = 1
      this.hasMore = true
      this.getList()
    },
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getList()
      }
    },
    chooseItem(item, index) {
      if (this.itemList.length && index) {
        this.item = item
        this.inx = index
        this.showActionSheet = true
      }
    },
    actionClick(e) {
      this.showActionSheet = false
      const text = e.text
      switch (text) {
        case '修改信息':
          this.setMemberInfo(this.item)
          this.jumpSave()
          break
        case '删除':
          this.showModal = true
          break
      }
    },
    modalClick(e) {
      this.showModal = false
      if (e.index) {
        this.deleteAccount()
      }
    },
    // 删除企业子账号
    async deleteAccount() {
      const [err, res] = await deleteSubAccount(this.item.userId)
      if (!this.$http.errorCheck(err, res)) return false
      this.list.splice(this.inx, 1)
      this.toast('删除成功')
    },
    jumpSave() {
      this.jump('/user/save-member/save-member')
    },
    ...mapMutations({
      setMemberInfo: 'user/setMemberInfo'
    })
  }
}
</script>

<style scoped>

</style>
